<template>

  <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="我的待办" name="tasks">
      <myTask v-if="activeName == 'tasks'" ref="tasks"></myTask>
    </el-tab-pane>
    <el-tab-pane label="我的发起" name="initiator">
      <myInitiator v-if="activeName == 'initiator'" ref="initiator"></myInitiator>
    </el-tab-pane>
    <el-tab-pane label="历史记录" name="history">
      <myHistory v-if="activeName == 'history'" ref="history"></myHistory>
    </el-tab-pane>
  </el-tabs>

</template>

<script>
import myTask from "@/views/activiti/task/myTask";
import myInitiator from "@/views/activiti/task/myInitiator";
import myHistory from "@/views/activiti/task/myHistory";
export default {
  name: "index",
  components: {
    myTask,
    myInitiator,
    myHistory
  },
  data() {
    return {
      activeName: "tasks"
    }
  },
  mounted() {
    this.onQuery();
  },
  methods: {
    handleClick(tab, event) {
      this.activeName = tab.name;
      var that = this;
      setTimeout(function () {
        that.onQuery();
      }, 500);
    },
    onQuery() {
       this.$refs[this.activeName];
    }
  }
}
</script>

<style scoped>

</style>
